<template>
  <div class="product-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="$router.push('/productComb/add')"
        >添加产品组合</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        @currentPage="goCurrent"
        @delete="del"
        @modify="modify"
        @sizeChange="sizeChange"
      />
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Table from "@/components/Table";
import { getList, update, delItem, toggleBanner } from "@/api/productComb";
import { pagination, page } from "@/utils/enumConfig";
import { Message } from "element-ui";

export default {
  name: "ProductComb",
  components: {
    normalFilter,
    Table
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "name",
          title: "标题",
          placeholder: "请输入"
        }
      ],
      onFilterChange: value => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page
        });
      }
    };
    const columnProps = [
      {
        title: "标题",
        dataIndex: "name",
        key: "name"
      },
      // {
      //   title: "背景图",
      //   dataIndex: "bgImage",
      //   key: "bgImage",
      //   render: record => {
      //     return `<img style="width:150px;height:80px;object-fit:contain" src="${record.bgImage}"></img>`;
      //   }
      // },
      {
        title: "背景颜色",
        dataIndex: "bgColor",
        key: "bgColor"
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime"
      }
    ];
    return {
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
      show: false
    };
  },
  async created() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex
    };
    this.getList(param);
  },
  methods: {
    goCurrent(currentIndex) {
      console.log(currentIndex);
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/productComb/update/${id}` });
    },
    async toggleBanner({ id, isBanner }) {
      let res = await toggleBanner({ id, isBanner: isBanner ? 1 : 0 });
      if (res.code === 1) {
        Message({
          message: "状态更新成功！",
          type: "success",
          duration: 1 * 1000
        });
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    },
    async del({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    },
    async getList(param) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current
      };
      records.forEach(item => {
        item.isHot = item.isHot == 1 ? true : false;
        item.isBanner = item.isBanner == 1 ? true : false;
      });
      this.tableData = records;
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    async switchIsHot(item) {
      let res = await update({ id: item.id, isHot: item.isHot ? 1 : 0 });
      if (res && res.code === 1) {
        Message({
          message: "状态更新成功！",
          type: "success",
          duration: 1 * 1000
        });
        this.getList({
          ...this.filterParam,
          current: 1
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.product-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
}
</style>
